<template>
	<bigScreenContainer>
		<div class="page_board">
			<div class="page_header"
				:style="{ background: `url(${componentContent.imageMap['bg_head']}) no-repeat`, 'background-size': '100% 100%' }">
				<span>腾 洋 环 境 驾 驶 舱</span></div>
			<div class="page_content">
				<div class="page_left">
					<div>
						<div class="com_big_title">当年累计用能</div>
						<div class="com_box">
							<div class="card_cards">
								<div class="c_num"><label>耗电量：</label>
									<div>
										<div v-for="item in hdl">{{ item }}</div>
									</div><span>kW.h</span>
								</div>
								<div class="c_num"><label>用气量：</label>
									<div>
										<div v-for="item in yql">{{ item }}</div>
									</div><span>kW.h</span>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="com_big_title">当月耗电量排名</div>
						<div class="com_box">
							<div class="com_chart" ref="domDyhdl"></div>
						</div>
					</div>
					<div>
						<div class="com_big_title">当月用气量排名</div>
						<div class="com_box">
							<div class="com_chart" ref="domDyyql"></div>
						</div>
					</div>
				</div>
				<div class="page_right">
					<div class="top">
						<div class="left">
							<div class="com_big_title"></div>
							<div class="com_chart">
								<img :src="componentContent.imageMap['cj']" />
                            </div>
							</div>
							<div class="right">
								<div>
									<div class="com_big_title">温度监控</div>
									<div class="com_box">
										<div class="com_chart" ref="domWd"></div>
									</div>
								</div>
								<div>
									<div class="com_big_title">湿度监控</div>
									<div class="com_box">
										<div class="com_chart" ref="domSd"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="bottom">
							<div class="com_big_title">消防安监</div>
							<div class="com_box">
								<div class="x_box">
									<div>
										<div class="icon">
											<img :src="componentContent.imageMap['icon1']" /><span>消防演习次数</span>
										</div>
										<label class="c_blue">{{ otherData.xfyxcs }}次</label>
									</div>
									<div>
										<div class="icon">
											<img :src="componentContent.imageMap['icon2']" /><span>应急预案数量</span>
										</div>
										<label class="c_red">{{ otherData.yjyasl }}件</label>
									</div>
									<div>
										<div class="icon">
											<img :src="componentContent.imageMap['icon3']" /><span>特种设备数量</span>
										</div>
										<label class="c_green">{{ otherData.tzsbsl }}件</label>
									</div>
									<div>
										<div class="com_chart" ref="domJsbyl"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</bigScreenContainer>
</template>
<script>
	const xAxis = {
    type: 'category',
    axisLine: {
        lineStyle: {
            color: '#DDDDDD',
            width: 2
        }
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        color: '#DDDDDD',
    },
    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
}
const yAxis = {
    type: 'value',
    nameTextStyle: { color: '#DDDDDD' },
    axisLine: {
        show: false
    },
    axisLabel: {
        color: '#DDDDDD'
    },
    splitLine: {
        show: true,
        lineStyle: {
            type: 'dashed',
            color: '#E6E6E6'
        }
    }
}
export default {
    name: "environment",
    data() {
        return {
            componentContent,
            lineOption: {
                grid: {
                    top: '10%',
                    bottom: '10%',
                    left: '10%',
                    right: '3%'
                },
                xAxis: xAxis,
                yAxis: yAxis,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ['#20FCFF'],
                series: [
                    {
                        name: '2024',
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(32, 252, 255,0.3)' }, // 渐变色的起始颜色
                                { offset: 1, color: 'transparent' } // 渐变色的结束颜色
                            ])
                        },
                        data: [9500, 6700, 4500, 6008, 7500, 6800]
                    }
                ]
            },
            barOption: {
                grid: {
                    top: '10%',
                    bottom: '10%',
                    left: '10%',
                    right: '3%'
                },
                xAxis: xAxis,
                yAxis: yAxis,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ['#43A8F4'],
                series: [
                    {
                        type: 'bar',
                        name: '合格率',
                        barWidth: 30,
                        itemStyle: {
                            barBorderRadius: [15, 15, 0, 0]
                        },
                        data: [30, 25, 15, 60, 10, 14, 25, 36, 40, 17, 28, 11]
                    }
                ]
            },
            hdl: [],
            yql: [],
            otherData: {}
        }
    },
    computed: {},
    mounted() {
        this.getData();
    },
    methods: {
        //初始化平台方法
        requestCode() {
            return this.WitGlobal.requestCode(...arguments);
        },
        getData() {
            this.requestCode("SJKB.HJ.db.manage.selectBoardHjAtt", {}).then(res => {
                if (res.code == 200) {
                    this.otherData = res.data[0];
                    let value = Number(this.otherData.hdl).toFixed(1)
                    let rest = String(value).padStart(10, '0');
                    this.hdl = rest.split('');
                    let value1 = Number(this.otherData.yql).toFixed(1)
                    let rest1 = String(value1).padStart(10, '0');
                    this.yql = rest1.split('');
                    let pieOption = {
                        series: [
                            {
                                type: 'gauge', // 仪表盘类型
                                name: '',
                                center: ['50%', '60%'], // 中心点（圆心坐标）
                                radius: '50%', // 圆大小（仪表盘半径）
                                clockwise: true, // 仪表盘刻度是否是顺时针增长
                                // 仪表盘轴线相关配置
                                axisLine: {
                                    show: true,
                                    roundCap: true,
                                    // 设置背景圆环样式
                                    lineStyle: {
                                        width: 12, // 圆环宽度
                                        color: [[1, '#E6E6E6']] // 圆环背景色
                                    }
                                },
                                // 仪表盘指针
                                pointer: {
                                    show: false
                                },
                                // 进度设置
                                progress: {
                                    show: true,
                                    overlap: false, // 多组数据时进度条是否重叠
                                    roundCap: true, // 是否在两端显示成圆形
                                    // 进度条样式
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                            {
                                                offset: 0,
                                                color: '#8FCDF0'
                                            },
                                            {
                                                offset: 1,
                                                color: '#0294F5'
                                            }
                                        ])
                                    }
                                },
                                // 仪表盘分割线
                                splitLine: {
                                    show: false
                                },
                                // 刻度样式
                                axisTick: {
                                    show: false
                                },
                                // 刻度标签
                                axisLabel: {
                                    show: false
                                },
                                title: {
                                    show: true,
                                    fontSize: 18,
                                    color: '#DDDDDD',
                                    offsetCenter: ['0', '-140%']
                                },
                                data: [
                                    {
                                        value: [this.otherData.byjsl],
                                        name: '及时保养率',
                                        detail: {
                                            fontSize: 24,
                                            color: '#DDDDDD',
                                            offsetCenter: ['0%', '0%'],
                                            formatter: (value) => {
                                                return value + '%';
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    this.$nextTick(() => {
                        echarts.init(this.$refs.domJsbyl).setOption(pieOption);
                    })
                }
            });
            this.requestCode("SJKB.HJ.db.manage.selectBoardHjNh", {}).then(res => {
                if (res.code == 200) {
                    let xData = [], hdlData = [], yqlData = [];
                    res.data.forEach(item => {
                        xData.push(item.cj);
                        hdlData.push(item.hdl);
                        yqlData.push(item.yql);
                    });
                    let option = JSON.parse(JSON.stringify(this.barOption));
                    option.xAxis.data = xData;
                    option.series[0].data = hdlData;
                    this.$nextTick(() => {
                        echarts.init(this.$refs.domDyhdl).setOption(option);
                        option.color = ['#E69E7C'];
                        option.series[0].data = yqlData;
                        echarts.init(this.$refs.domDyyql).setOption(option);
                    })
                }
            });

            this.requestCode("SJKB.HJ.db.manage.selectBoardHjSdwd", {}).then(res => {
                if (res.code == 200) {
                    let xData = [], wdData = [], sdData = [];
                    res.data.forEach(item => {
                        xData.push(item.time);
                        wdData.push(item.wd);
                        sdData.push(item.sd);
                    });
                    let lineOption = JSON.parse(JSON.stringify(this.lineOption));
                    lineOption.xAxis.data = xData;
                    lineOption.series[0].data = wdData;
                    this.$nextTick(() => {
                        echarts.init(this.$refs.domWd).setOption(lineOption);
                        lineOption.color = ['#6060F9']
                        lineOption.series[0].areaStyle = {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(96, 96, 249, 0.3)' }, // 渐变色的起始颜色
                                { offset: 1, color: 'transparent' } // 渐变色的结束颜色
                            ])
                        };
                        lineOption.series[0].data = sdData;
                        echarts.init(this.$refs.domSd).setOption(lineOption);
                    })
                }
            });
        },
    },
};
</script>
<style lang="less" scoped>
	.page_board {
		width: 1920px;
		height: 1080px;
		background: #111726;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		line-height: normal;
		color: #DDDDDD;

		.page_header {
            height: 80px;
            line-height: 70px;
            background: url(./top.png) no-repeat;
            background-size: cover;
            font-weight: 600;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            span{
                font-weight: 600;
                font-size: 40px;
                color: #ffffff;
                text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
                background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
				background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-align: center;
                padding-top: 36px;
            }
		}

		.page_content {
            height: 960px;
			flex: auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 20px;
			padding-top: 0;

			.com_big_title {
				font-size: 20px;
				color: #0095ff;
				height: 60px;
				padding-top: 21px;
				text-align: center;
			}

			.com_small_title {
				display: flex;
				flex-direction: row;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 60px;
					color: #DDDDDD;
					border-bottom: 3px solid rgba(0, 0, 0, 0);

					span {
						margin-top: 5px;
					}
				}

				.bg1 {
					background: rgba(70, 168, 247, 0.3);

					span {
						color: #46a8f7;
					}
				}

				.bg2 {
					background: rgba(230, 207, 92, 0.25);

					span {
						color: #e6cf5c;
					}
				}

				.select {
					border-bottom: 3px solid #077dee;
				}
			}

			.com_box {
				flex: auto;
				background: rgba(255, 255, 255, 0.05);
				flex-shrink: 0;
				overflow: hidden;
				padding: 0 10px;
			}

			.com_chart {
				width: 100%;
				height: 100%;
			}

			.com_table {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				.thead,
				.tr {
					display: flex;
					flex-direction: row;

					&>div {
						flex: 1;
						padding: 7px;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.thead {
					color: #1a79ff;
				}

				.tbody {
					height: 150px;
					overflow-y: scroll;

					&::-webkit-scrollbar {
						display: none;
					}

					.tr {
						&:nth-child(2n-1) {
							background: rgba(0, 0, 0, 0.1);
							border-bottom: 1px solid #e6e6e6;
							border-top: 1px solid #e6e6e6;
						}
					}
				}
			}

			.page_left {
				width: 33%;
				margin-right: 20px;
				display: flex;
				flex-direction: column;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.card_cards {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 60px 0;

					.c_num {
						height: 40px;
						display: flex;
						flex-direction: row;
						align-items: center;
						// margin-top:0px;

						&>label {
							width: 110px;
							text-align: right;
							font-size: 18px;
							color: #DDDDDD;
						}

						&>span {
							width: 70px;
							font-size: 18px;
							color: #DDDDDD;
						}

						&>div {
							margin: 0 10px;
							flex: auto;
							display: flex;
							flex-direction: row;
							justify-content: space-between;

							&>div {
								width: 30px;
								height: 50px;
								background: linear-gradient(0deg, #24c4ff, #0057c2);
								border: 2px solid;
								border-image: linear-gradient(0deg, #24c4ff, #0057c2) 10 10;
								font-size: 28px;
								color: #ffffff;
								line-height: 50px;
								text-align: center;
							}
						}
					}
				}
			}

			.page_right {
				flex: auto;
				display: flex;
				flex-direction: column;

				.top {
					flex: auto;
					display: flex;
					flex-direction: row;

					&>div {
						flex: 1;
						flex-shrink: 0;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.left {
						display: flex;
						flex-direction: column;
					}

					.right {
						margin-left: 20px;
						display: flex;
						flex-direction: column;

						&>div {
							flex: 1;
							display: flex;
							flex-direction: column;
						}
					}
				}

				.bottom {
					height: 33.4%;
					display: flex;
					flex-direction: column;

					.x_box {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						padding-left: 71px;

						&>div {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.icon {
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-bottom: 20px;

								img {
									width: 28px;
									height: 28px;
									margin-right: 13px;
								}

								span {
									font-size: 18px;
									color: #DDDDDD;
								}
							}

							label {
								font-weight: 600;
								font-size: 48px;
							}
						}
					}

					.c_red {
						color: #df5f56;
					}

					.c_blue {
						color: #0294f5;
					}

					.c_green {
						color: #20fcff;
					}
				}
			}
		}
	}
</style>